<template>
    <div>
        <!--表格头部搜索区域-->
        <div>
            <a-button class="editable-add-btn" @click="handleAdd" style="margin-right: 10px">添加车辆</a-button>
            <a-input-search placeholder="搜索车辆" style="width: 200px" @search="onSearch" allowClear v-model="searchMsg"/>
        </div>

        <!--表格区域-->
        <div>
            <a-table :columns="columns" :data-source="carList" style="padding-top: 10px;" :pagination="false"
                     :scroll="{ y: 350 }">
                <!--车辆名称，点击查看使用情况-->
                <a slot="name" slot-scope="scope" @click="showCarInfo(scope)">{{ scope.carName }}</a>

                <!--车辆图片-->
                <span slot="carPic" slot-scope="scope">
        <img :src="scope" style="width: 100px" alt="">
      </span>

                <!--车辆状态-->
                <span slot="scope" slot-scope="scope">
          <a-switch checked-children="可用"
                    un-checked-children="不可用"
                    @change="checked=>handleChange(checked,scope.carId)"
                    :default-checked="scope.isActive==='true'"
          />
       </span>

                <!--车辆描述-->
                <span slot="carDesc" slot-scope="descs">
      <a-tag
              v-for="desc in descs"
              :key="desc"
              color="geekblue"
      >
        {{ desc }}
      </a-tag>
      </span>


                <!--操作列-->
                <span slot="action" slot-scope="scope">
          <a @click="handleEdit(scope)">Edit</a>
          <a-divider type="vertical"/>

          <a-popconfirm
                  v-if="carList.length"
                  title="Sure to delete?"
                  @confirm="() => onDelete(scope)"
          >
          <a>Delete</a>
        </a-popconfirm>

        </span>

            </a-table>
        </div>
        <!--分页器-->
        <div>
            <a-pagination v-model="pagination.current"
                          :show-total="total => `总数 ${pagination.total} 条`"
                          :total="pagination.total"
                          :page-size="pagination.pageSize"
                          @change="pageNumChange"
                          show-less-items
                          style="margin-top: 15px;text-align: right"/>
        </div>


        <!--添加车辆对话框-->
        <a-modal
                title="添加车辆"
                :visible="addCarVisible"
                :footer="false"
                @cancel="handleCancel"
        >

            <a-form v-bind="formItemLayout" :form="addCarForm" @submit="handleSubmit">

                <!--车辆名称-->
                <a-form-item label="车辆名称" v-bind="formItemLayout">
                    <a-input v-decorator="['carName',{rules:[{required: true,message:'请输入车辆名称',whitespace: true}]}]"/>
                </a-form-item>


                <a-form-item label="车辆描述" v-bind="formItemLayout">
                    <div>
                        <template v-for="(tag, index) in tags">
                            <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                                <a-tag :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                                    {{ `${tag.slice(0, 20)}...` }}
                                </a-tag>
                            </a-tooltip>
                            <a-tag v-else :key="tag" :closable="index !== -1" @close="() => handleClose(tag)"
                                   color="blue">
                                {{ tag }}
                            </a-tag>
                        </template>
                        <a-input
                                v-if="inputVisible"
                                ref="input"
                                type="text"
                                size="small"
                                :style="{ width: '78px' }"
                                :value="inputValue"
                                @change="handleInputChange"
                                @blur="handleInputConfirm"
                                @keyup.enter="handleInputConfirm"
                        />
                        <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                            <a-icon type="plus"/>
                            添加描述
                        </a-tag>
                    </div>
                </a-form-item>


                <a-form-item label="Upload">
                    <a-upload
                            :defaultFileList="fileList"
                            name="picture"
                            action="/upload"
                            list-type="picture"
                            @change="handleUploadChange"
                    >
                        <a-button>
                            <a-icon type="upload"/>
                            上传车辆图片
                        </a-button>
                    </a-upload>
                    <!--          <a-input v-show="false"-->
                    <!--                   v-decorator="['carImage',{rules: [{ required: true, message: '请上传车辆图片', whitespace: true}]}]"></a-input>-->
                </a-form-item>


                <!--按钮-->
                <a-form-item
                        :wrapper-col="{
        xs: { span: 24, offset: 0 },
        sm: { span: 16, offset: 8 },
      }"
                >
                    <a-button @click="handleCancel" style="margin-right: 10px">
                        取消
                    </a-button>
                    <a-button type="primary" html-type="submit" :loading="submitLoading">
                        提交
                    </a-button>
                </a-form-item>
            </a-form>


        </a-modal>


        <!--编辑车辆对话框-->
        <a-modal
                title="编辑车辆"
                :visible="editCarVisible"
                :footer="false"
                @cancel="handleEditCancel"
        >

            <a-form v-bind="formItemLayout" :form="editCarForm" @submit="handleEditSubmit">

                <!--车辆名称-->
                <a-form-item v-bind="formItemLayout">
                    <a-input v-show="false" v-decorator="['editCarId']"/>
                </a-form-item>

                <!--车辆名称-->
                <a-form-item label="车辆名称" v-bind="formItemLayout">
                    <a-input
                            v-decorator="['editCarName',{rules:[{required: true,message:'请输入车辆名称',whitespace: true}]}]"/>
                </a-form-item>


                <a-form-item label="车辆描述" v-bind="formItemLayout">
                    <div>
                        <template v-for="(tag, index) in tags">
                            <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                                <a-tag :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                                    {{ `${tag.slice(0, 20)}...` }}
                                </a-tag>
                            </a-tooltip>
                            <a-tag v-else :key="tag" :closable="index !== -1" @close="() => handleClose(tag)"
                                   color="blue">
                                {{ tag }}
                            </a-tag>
                        </template>
                        <a-input
                                v-if="inputVisible"
                                ref="input"
                                type="text"
                                size="small"
                                :style="{ width: '78px' }"
                                :value="inputValue"
                                @change="handleInputChange"
                                @blur="handleInputConfirm"
                                @keyup.enter="handleInputConfirm"
                        />
                        <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                            <a-icon type="plus"/>
                            添加描述
                        </a-tag>
                    </div>
                </a-form-item>


                <a-form-item label="Upload">
                    <a-upload
                            :defaultFileList="fileList"
                            name="picture"
                            action="/upload"
                            list-type="picture"
                            @change="handleUploadChange"
                    >
                        <a-button>
                            <a-icon type="upload"/>
                            上传车辆图片
                        </a-button>
                    </a-upload>
                    <a-input v-show="false" v-decorator="['carImage']"></a-input>
                </a-form-item>


                <!--按钮-->
                <a-form-item
                        :wrapper-col="{
        xs: { span: 24, offset: 0 },
        sm: { span: 16, offset: 8 },
      }"
                >
                    <a-button @click="handleEditCancel" style="margin-right: 10px">
                        取消
                    </a-button>
                    <a-button type="primary" html-type="submit" :loading="submitLoading">
                        提交
                    </a-button>
                </a-form-item>
            </a-form>


        </a-modal>

        <drawer ref="drawer" :title="title" resource="car" :resource-id="carId" v-if="carId"></drawer>
    </div>
</template>

<script>
    const columns = [
        {
            title: '#',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            width: 50,
            customRender: (text, record, index) => `${index + 1}`,
        },
        {
            title: '车辆名称',
            key: 'carName',
            scopedSlots: {customRender: 'name'},
            width: 200,
        },
        {
            title: '车辆图片',
            dataIndex: 'carPic',
            key: 'carPic',
            scopedSlots: {customRender: 'carPic'},
        },
        {
            title: '车辆状态',
            key: "isActive",
            scopedSlots: {customRender: 'scope'}
        },
        {
            title: '车辆描述',
            key: 'carDesc',
            dataIndex: 'carDesc',
            scopedSlots: {customRender: 'carDesc'},
        },
        {
            title: '操作',
            key: 'action',
            scopedSlots: {customRender: 'action'},
        },

    ];

    const carList = [];
    import Drawer from "@/views/common/Drawer";

    export default {
        components: {Drawer},
        name: "Car",
        data() {
            return {
                //抽屉参数
                carId: '',
                title: '',


                carList,
                columns,
                searchMsg: '',

                pagination: {
                    pageSize: 7,
                    current: 1,
                    total: 0,
                },
                submitLoading: false,
                addCarVisible: false,

                addCarForm: this.$form.createForm(this),
                editCarForm: this.$form.createForm(this),

                //添加车辆表单布局
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 6},
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 16},
                    },
                },
                inputVisible: false,
                inputValue: '',

                //车辆描述标签
                tags: [],
                fileList: [],

                editCarVisible: false
            }
        },
        methods: {

            showCarInfo(scope) {
                this.carId = scope.carId;
                console.log(this.carId);
                this.title = '车辆使用情况';
                this.$refs.drawer.showDrawer();
            },

            handleEditCancel() {
                this.editCarVisible = false;
                this.tags = [];
                this.editCarForm.resetFields();
            },

            //车辆编辑事件表单提交
            handleEditSubmit(e) {
                e.preventDefault();
                this.editCarForm.validateFields(async (err, fieldsValue) => {
                    if (err) {
                        return;
                    }
                    this.submitLoading = true;
                    const values = {
                        carName: fieldsValue['editCarName'],
                        carPic: fieldsValue['carImage'],
                        carDesc: this.tags
                    }
                    try {
                        const {data: res} = await this.$http.put(`/car/${fieldsValue['editCarId']}`, values);
                        if (res.status !== 200) throw Error
                        this.$message.success("更新车辆信息成功");
                        await this.getCarList();
                        this.submitLoading = false;
                        this.editCarVisible = false;
                    } catch (e) {
                        this.submitLoading = false;
                        console.log(e);
                    }


                })

            },

            //车辆编辑操作
            handleEdit(scope) {
                this.editCarVisible = true;
                console.log(scope);
                setTimeout(() => {
                    this.editCarForm.setFieldsValue({"editCarName": scope.carName});
                    this.editCarForm.setFieldsValue({"editCarId": scope.carId});
                    this.editCarForm.setFieldsValue({"editCarImage": scope.carPic});
                }, 100);
                this.tags = scope.carDesc;
            },

            //车辆删除操作
            async onDelete(scope) {
                try {
                    const {data: res} = await this.$http.delete(`/car/${scope.carId}`);
                    if (res.status !== 200) throw Error
                    this.$message.success("删除车辆操作成功");
                    await this.getCarList();
                } catch (e) {
                    console.log(e);
                }

            },

            //处理移除车辆描述标签事件
            handleClose(removedTag) {
                const tags = this.tags.filter(tag => tag !== removedTag);
                this.tags = tags;
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(function () {
                    this.$refs.input.focus();
                });
            },
            handleInputChange(e) {
                this.inputValue = e.target.value;
            },
            handleInputConfirm() {
                const inputValue = this.inputValue;
                let tags = this.tags;
                if (inputValue && tags.indexOf(inputValue) === -1) {
                    tags = [...tags, inputValue];
                }
                Object.assign(this, {
                    tags,
                    inputVisible: false,
                    inputValue: '',
                });
            },


            //车辆添加操作
            handleAdd() {
                this.addCarVisible = true;
            },

            //添加车辆对话框取消事件
            handleCancel() {
                this.addCarForm.resetFields();
                this.addCarVisible = false;
                this.fileList = [];
                this.tags = []
            },

            //文件上传状态改变
            async handleUploadChange(e) {
                console.log(e);
                if (e.file.status === "done") {
                    this.fileList = e.fileList;
                    this.addCarForm.setFieldsValue({"carImage": e.file.response.data})
                    console.log("上传文件", this.addCarForm.getFieldValue('carImage'));

                } else if (e.file.status === "removed") {
                    const {data: res} = await this.$http.delete(`/img/${this.addCarForm.getFieldValue('carImage')}`);
                    if (res.status === 200) console.log("移除文件成功，文件名: ", this.addCarForm.getFieldValue('carImage'));
                }
            },

            //添加车辆表单提交事件
            handleSubmit(e) {
                e.preventDefault();
                this.addCarForm.validateFields(async (err, fieldsValue) => {
                    if (err) {
                        return;
                    }
                    this.submitLoading = true;
                    const values = {
                        carName: fieldsValue['carName'],
                        carPic: fieldsValue['carImage'],
                        carDesc: this.tags
                    }
                    try {
                        const {data: res} = await this.$http.post(`/addcar`, values)
                        if (res.status !== 200) throw Error

                        setTimeout(() => {
                            this.addCarVisible = false
                            this.submitLoading = false;
                            this.$message.success("添加车辆成功");
                            this.addCarForm.resetFields();
                            this.tags = []
                            this.fileList = []
                            this.getCarList();
                        }, 500);

                    } catch (e) {
                        this.submitLoading = false;
                        return this.$message.warning("服务器繁忙，请稍后再试");
                    }
                })
            },


            //获取车辆列表
            async getCarList() {
                try {
                    const {data: res} = await this.$http.get(`/carList?pageNum=${this.pagination.current}&pageSize=${this.pagination.pageSize}`);
                    if (res.status !== 200) throw Error
                    this.pagination.total = res.total
                    const data = res.data;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].carDesc) {
                            data[i].carDesc = data[i].carDesc.split(",");
                        }
                    }
                    this.carList = data;
                } catch (e) {
                    console.log(e);
                }
            },

            //车辆搜索
            async onSearch() {
                try {
                    const {data: res} = await this.$http.get('/searchCar', {
                        params: {
                            search: this.searchMsg,
                            pageNum: this.pagination.current,
                            pageSize: this.pagination.pageSize
                        }
                    });
                    if (res.status !== 200) throw Error;

                    if (res.data) {
                        const data = res.data;
                        this.pagination.total = res.total
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].carDesc) {
                                data[i].carDesc = data[i].carDesc.split(",");
                            }
                        }
                        return this.carList = data;
                    }
                    this.$message.warning("暂无查询车辆")
                } catch (e) {
                    this.$message.warning("服务器异常,请稍后重试");
                }

            },

            //分页数据改变
            pageNumChange(page, pageSize) {
                this.pagination.current = page;
                this.pagination.pageSize = pageSize;
                this.getCarList();
            },

            //更新车辆状态
            async handleChange(checked, carId) {
                const {data: res} = await this.$http.put(`/car/${carId}/${checked}`);
                if (res.status !== 200) throw Error;
                await this.getCarList();
                this.$message.success("更新车辆状态成功");
            }
        },

        created() {
            this.getCarList();
        }
    }
</script>

<style scoped>
</style>
